<template>
  <div class="mainDiv">
    <el-container class="main_container">
      <el-main>
        <el-tabs>
          <el-tab-pane>
            <span slot="label"><i class="el-icon-tickets"></i> 订单信息</span>
            <el-form ref="form" :model="form" :rules="rules" label-width="130px">
              <el-card>
                <div slot="header" class="clearfix">
                  <span>基本信息</span>
                </div>
                <el-row :gutter="15">
                  <el-col :span="6">
                    <el-form-item label="订单号" prop="orderNo">
                      <el-input v-model="form.orderNo" placeholder="请输入订单号" disabled style="width: 220px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="部门" prop="deptId">
                      <treeselect v-model="form.deptId" append-to-body :options="deptOptions" :show-count="true" placeholder="请选择所属机构"
                        style="width: 95%" />
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="6">
                    <el-form-item label="委托单号" prop="entrustNo">
                      <el-input v-model="form.entrustNo" placeholder="请输入委托单号" style="width: 220px"/>
                    </el-form-item>
                  </el-col> -->
                  <el-col :span="6">
                    <el-form-item label="订单状态">
                      <dict-tag :options="dict.type.tms_order_status" :value="form.status" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="15">
                  <el-col :span="6">
                    <el-form-item label="客户名称" prop="clientName">
                      <el-input v-model="form.clientName" placeholder="请输入客户名称" style="width: 220px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="客户联系人" prop="clientContacts">
                      <el-input v-model="form.clientContacts" placeholder="请输入客户联系人" style="width: 220px"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="客户联系电话" prop="clientTel">
                      <el-input v-model="form.clientTel" placeholder="请输入客户联系电话" style="width: 220px"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-card>
              <el-card>
                <div slot="header" class="clearfix">
                  <span>地址信息</span>
                </div>
                <el-row :gutter="15">
                  <el-col :span="12">
                    <el-card style="height: 330px;">
                      <div slot="header" class="clearfix">
                        <span>发货信息</span>
                      </div>
                      <el-row>
                        <el-col :span="12">
                          <el-form-item label="寄件单位" prop="sendAddr">
                            <el-input v-model="form.sendAddr" placeholder="请输入寄件地址简称" style="width: 220px"/>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="寄件联系人" prop="sendContacts">
                            <el-input v-model="form.sendContacts" placeholder="请输入寄件联系人" style="width: 220px"/>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col>
                          <el-form-item label="寄件联系电话" prop="takeTel">
                            <el-input v-model="form.sendTel" placeholder="请输入寄件联系电话" style="width: 220px"/>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col>
                          <el-form-item label="寄件地址" prop="sendAddress">
                            <el-input v-model="form.sendAddress" placeholder="请输入内容" />
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-card>
                  </el-col>
                  <el-col :span="12">
                    <el-card style="height: 330px;">
                      <div slot="header" class="clearfix">
                        <span>收货信息</span>
                      </div>
                      <el-row>
                        <el-col :span="12">
                          <el-form-item label="收件单位" prop="takeAddr">
                            <el-input v-model="form.takeAddr" placeholder="请输入收件地址简称" style="width: 220px"/>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="收件联系人" prop="takeContacts">
                            <el-input v-model="form.takeContacts" placeholder="请输入收件联系人" style="width: 220px"/>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col>
                          <el-form-item label="收件联系电话" prop="takeTel">
                            <el-input v-model="form.takeTel" placeholder="请输入收件联系电话" style="width: 220px"/>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col>
                          <el-form-item label="收件地址" prop="takeAddress">
                            <el-input v-model="form.takeAddress" placeholder="请输入内容" />
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col>
                          <el-form-item label="收件备注" prop="takeMemo">
                            <el-input v-model="form.takeMemo" type="textarea" placeholder="请输入内容" />
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-card>
                  </el-col>
                </el-row>
              </el-card>
              <el-card>
                <div slot="header" class="clearfix">
                  <span>取派件信息</span>
                </div>
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="线路">
                      <el-select v-model="form.lineId" placeholder="请选择线路" clearable @change="lineChange">
                        <el-option v-for="item in lineOptions" :key="item.id" :label="item.name"
                          :value="item.id" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                 <el-col :span="8">
                   <el-form-item label="取件人">
                     <el-select v-model="form.pickupId" placeholder="请选择取件人">
                       <el-option v-for="item in userOptions" :key="item.userId" :label="item.nickName"
                         :value="item.userId"></el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
                 <el-col :span="8">
                   <el-form-item label="派件人">
                     <el-select v-model="form.dispatchId" placeholder="请选择派送人">
                       <el-option v-for="item in userOptions" :key="item.userId" :label="item.nickName"
                         :value="item.userId"></el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
                </el-row>
              </el-card>
              <el-card>
                <div slot="header" class="clearfix">
                  <span>派车信息</span>
                </div>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="车次">
                      <el-autocomplete
                      :fetch-suggestions="scheduleSearch"
                       popper-class="my-autocomplete"
                       v-model="form.scheduleDayName"
                       value-key="scheduleDayName"
                       @select="scheduleChange"
                       placeholder="请选择车次"
                      >
                      <template slot-scope="{ item }">
                          <el-descriptions :column="2" border>
                            <el-descriptions-item label="车次">{{item.name}}</el-descriptions-item>
                            <el-descriptions-item label="日期">
                              {{ parseTime(item.day, '{y}-{m}-{d}') }}
                            </el-descriptions-item>
                          </el-descriptions>
                        </template>
                      </el-autocomplete>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="车辆">
                      <el-select v-model="form.carId" placeholder="请选择车辆" clearable size="small" @change="carChange">
                        <el-option v-for="item in scheduleDtlOptions" :key="item.carId" :label="item.carNumber"
                          :value="item.carId" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="司机">
                      <el-input v-model="form.driverName" style="width: 224px;"/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-card>
            </el-form>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label"><i class="el-icon-goods"></i> 物品信息</span>
            <el-card>
              <div slot="header" class="clearfix">
                <span>物品清单</span>
              </div>
              <el-table :loading="true" :data="form.items" border stripe>
                <el-table-column label="编号" prop="pno" />
                <el-table-column label="名称" prop="name" />
                <el-table-column label="数量" prop="nums" />
                <el-table-column label="箱号" prop="boxNo" />
              </el-table>
            </el-card>
          </el-tab-pane>
        </el-tabs>

      </el-main>
      <el-footer>
        <div class="footerDivClass">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="close()">取 消</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import {
    getOrder,
    addOrder,
    updateOrder
  } from "@/api/tms/order";
  import {treeselect,treeselectV2} from '@/api/system/dept'
  import {listClient} from '@/api/tms/client'
  import {listLines} from '@/api/tms/lines'
  import {listCar} from '@/api/tms/car'
  import {listDriver} from '@/api/tms/driver'
  import {listSchedule} from '@/api/tms/schedule'
  import {getScheduleByLineId,getScheduleDtlByScheduleId,dispatch} from '@/api/tms/dispatch'
  import {listUser} from '@/api/system/user'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    components:{Treeselect},
    dicts: ['tms_order_status', 'sys_del_flag', 'tms_order_source_type', 'tms_order_type','tms_delivery_type'],
    data(){
      return{
        // 遮罩层
        loading: true,

        // 订单表格数据
        deptOptions:[],
        clientOptions:[],
        lineOptions:[],
        carOptions:[],
        driverOptions:[],
        userOptions:[],
        scheduleOptions:[],
        scheduleDtlOptions:[],

        // 表单参数
        form: {},

        // 表单校验
        rules: {
          deptId: [{
            required: true,
            message: "部门不能为空",
            trigger: "blur"
          }],
        }

      }
    },
    watch:{
      "form.clientId":{
        handler(newVal){
          if(newVal){
            this.getLines(newVal)
          }
        },
        deep: true,
        immediate: true
      },
      "form.lineId":{
        handler(newVal){
          if(newVal){
            this.scheduleChange(newVal)
          }
        },
        deep: true,
        immediate: true
      },
      "form.scheduleId":{
        handler(newVal){
          if(newVal){
            this.getCar(newVal)
          }
        },
        deep: true,
        immediate: true
      }
    },
    created() {
      this.getDept();
      this.getClient();

      this.getUser();
      this.reset();
      this.getLines();

      const id = this.$router.currentRoute.params.id;
      if(id != undefined && id != ''){
        this.getOrderInfo(id)
      }
    },
    methods:{
      getOrderInfo(id){
        getOrder(id).then(response=>{
          this.form = response.data;
          this.scheduleOptions.forEach(item=>{
            if(item.id == this.form.scheduleId){
              this.form.scheduleDayName = item.scheduleDayName;
            }
          })
          if(this.form.scheduleId){
            this.getCar(this.form.scheduleId)
          }
        })
      },
      /** 查询部门下来数据 */
      getDept(){
        treeselectV2().then(response=>{
          this.deptOptions = response.data;
        })
      },
      /** 查询客户列表 */
      getClient(){
        listClient().then(response=>{
          this.clientOptions = response.rows;
        })
      },
      /** 查询线路列表 */
      getLines(id){
        listLines({'clientId':id}).then(response=>{
          this.lineOptions = response.rows;
        })
      },
      selecSchedule(id){
        getScheduleByLineId({'lineId':id}).then(response=>{
          this.scheduleOptions = response.data;
        })
      },
      //地址选择
      scheduleSearch(queryString,cb){
        var restaurants = this.scheduleOptions;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.scheduleDayName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      scheduleChange(e){
        this.form.scheduleId = e.id;
      },
      carChange(e){
        if(this.scheduleDtlOptions.length > 0){
          this.scheduleDtlOptions.forEach(item=>{
            if(item.carId == e){
              this.form.driverId = item.driverId;
              this.form.driverName = item.driverName;
            }
          })
        }
      },
      /** 查询车辆列表 */
      getCar(id){
        getScheduleDtlByScheduleId({'scheduleId':id}).then(response=>{
          this.scheduleDtlOptions = response.data;
        })
      },
      /** 查询司机列表 */
      getDriver(){
        listDriver().then(response=>{
          this.driverOptions = response.rows;
        })
      },
      /** 查询线路列表 */
      getUser(){
        listUser().then(response=>{
          this.userOptions = response.rows;
        })
      },
      lineChange(e){
        this.selecSchedule(e);
        let linesOptions = this.lineOptions;
        linesOptions.forEach(item=>{
          if(item.id == e){
            this.form.dispatchId = item.dispatchId;
            this.form.pickupId = item.pickupId;
          }
        })
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          deptId: undefined,
          orderNo: undefined,
          taskId: undefined,
          objId: undefined,
          fid: undefined,
          entrustNo: undefined,
          orderSerial: undefined,
          sourceType: undefined,
          status: "0",
          type: undefined,
          signTime: undefined,
          cancelTime: undefined,
          deliveryTime: undefined,
          deliveryType: undefined,
          arriveTime: undefined,
          memo: undefined,
          clientId: undefined,
          clientName: undefined,
          clientContacts: undefined,
          clientTel: undefined,
          sendAddress: undefined,
          sendContacts: undefined,
          sendDate: undefined,
          sendLat: undefined,
          sendLng: undefined,
          sendAddr: undefined,
          takeAddr: undefined,
          takeContacts: undefined,
          takeDate: undefined,
          takeTel: undefined,
          takeLat: undefined,
          takeLng: undefined,
          takeMemo: undefined,
          dispatcherId: undefined,
          lineId: undefined,
          lineName: undefined,
          scheduleId:undefined,
          driverId: undefined,
          driverName: undefined,
          driverPhone: undefined,
          carNumber: undefined,
          carId: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined,
          delFlag: undefined,
          isTrailer:'0'
        };
        this.resetForm("form");
      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id != null) {
              updateOrder(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.close()
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addOrder(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.close()
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      /** 关闭按钮 */
      close() {
        const obj = {
          path: "/tms/order",
          query: { t: Date.now(), pageNum: this.$route.query.pageNum },
        };
        this.$tab.closeOpenPage(obj);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .input-width{
    width: 214px;
  }

  .mainDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .main_container {
    width: 100%;
    height: 100%;
  }
  .el-card {
    margin-bottom: 5px;
  }
  .el-footer {
    background-color: #ffffff;
    color: #333;
    text-align: right;
    line-height: 60px;
    border-top: 1px solid #e6ebf5;
    box-shadow: 0px 0px 10px #cdcdcd;
    z-index: 1000;
  }
  .footer-class {
    text-align: right;
    margin-top: 15px;
  }
  //顶部距离css
  .topItem {
    margin-bottom: 0px;
  }
  .areaSelect {
    width: 100%;
    padding-right: 5px;
  }
</style>
<style>
/*  .el-popper[x-placement^=bottom] {
    width:auto !important;
  } */
  .my-autocomplete{
    width:auto !important;
  }
</style>
